import React from 'react'
import {Card, Form, Input, Button, Checkbox, Icon, message} from 'antd'

const FormItem = Form.Item;

class Login extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                message.success(`恭喜你, ${values.userName},密码:${values.userPwd} 注册成功`)
            }
        });
        const {getFieldsValue,getFieldValue} = this.props.form
        console.log('getFieldsValue()')
        console.log(getFieldsValue())
        console.log('getFieldValue()')
        console.log(getFieldValue('userPwd'))

    }
    render() {
        const {getFieldDecorator} = this.props.form
        console.log(getFieldDecorator)
        return <div>
            <Card title={'行内'}>
                <Form layout={'inline'}>
                    <FormItem>
                        <Input placeholder={"用户名"}/>
                    </FormItem>
                    <FormItem>
                        <Input placeholder={"密码"}/>
                    </FormItem>
                    <FormItem>
                        <Button type={'primary'}>登录</Button>
                    </FormItem>
                </Form>
            </Card>
            <Card title={'垂直'} style={{width: 300}}>
                <Form>
                    <FormItem>
                        {getFieldDecorator('userName', {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input your username!'
                                },
                                {
                                    min: 5,
                                    max: 10,
                                    message: '长度请控制在5-10之内'
                                },
                                {
                                    pattern: /^[aeiou]\d{2}/,
                                    message: '名称不符合规则必须是xxx规则'
                                }
                            ],
                        })(
                            <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder={"用户名"}/>
                        )}

                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('userPwd', {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input your pwd!'
                                }
                            ],
                        })(
                            <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder={"密码"}/>
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',//checkbox 需要添加设置
                            initialValue: true,
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input your pwd!'
                                }
                            ],
                        })(
                            <Checkbox>记住密码</Checkbox>
                        )}

                        <a href="/admin/form/register" style={{float: "right"}}>去注册</a>
                    </FormItem>
                    <FormItem>
                        <Button type={'primary'} onClick={this.handleSubmit}>登录</Button>
                    </FormItem>
                </Form>
            </Card>
        </div>
    }
}

export default Form.create()(Login);